var width = 1200,
        height = 700;

var chinaG = 0;

    d3.csv("RKMD.csv",function(error,data) {
        
        console.log(data);

        var maxRate = d3.max(data,function(d) {
            return parseFloat(d["density"]);
        });
        
        //取对数进行映射
        var maxRate = Math.log(maxRate);
        console.log(maxRate);
        
        //将数值映射成颜色样式
        var rateToColor = d3.scale.quantize()
        .domain([0, maxRate])
        .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
        
        
        //构造各个省份的数值和颜色值，作为可视化的时候颜色和具体数值显示
        provinceColorData = {};
        
        for(var dataIndex in data) {
            var rate = parseFloat(data[dataIndex]["density"]);
            console.log(rate);
            var province = data[dataIndex]["province"];

            var provinceInfo = {};
            provinceInfo["rateVal"] = data[dataIndex]["density"];
            provinceInfo["rateColor"] = rateToColor(Math.log(rate));
            
            //store the province info by province key
            provinceColorData[province] = provinceInfo;
        }

        drawTheHeatMap(provinceColorData);
    });
    
    function drawTheHeatMap(data) {
        
        console.log(data);
        
        d3.json("china2.json", function(error,mapData){
      //这里是回调函数，如果加载成功，data就是json对象
      //执行drawChina方法绘制地图
            console.log(mapData);
            drawChina(mapData,data);
        });
        
        // Project from latlng to pixel coords
        //使用墨卡托投影
        var projection = d3.geo.mercator()
          .scale(width/1.5)				   //对地图进行缩放
          .translate([width / 2 , height / 2])		 //将地图平移到屏幕中间
          .rotate([-110, 0])
          .center([0, 37.5])				  //设置中心点，//这里根据地图经纬度数据，来设置中心调整到屏幕中心
        ;

        // Draw geojson to svg path using the projection
        var path = d3.geo.path().projection(projection);
          
        //init color mapping function;
        var color = "Oranges";
        
        
        //init svg container;
        var container = d3.select("body").append("svg")
                        .attr("width",1200).attr("height",1200)
                        .attr("class",color);
        
        //画出中国地图
        function drawChina(ds){
            if(!chinaG)
                chinaG = container.append("g");
            var paths = chinaG.selectAll("path")
              .data(ds.features)
              .enter()
              .insert("path")
              .attr("id", function(d){
                return d.id;
              })
              .attr("class", function(d,i) {                 
                    // set the color by the province rate
                    if(data[d.properties["name"]] == undefined)
                         return ;
                    //console.log(data[d.properties["name"]]["rateColor"]);                 
                    return  data[d.properties["name"]]["rateColor"];
               })
              .attr("d", path)
              .attr('stroke-width','0.7px')
              .on("mouseover",function(d,i){
                    console.log(d["properties"]);
                    d3.select(this)
                        .attr("class","highlight");
               })
               .on("mouseout",function(d,i){
                    if(data[d.properties["name"]] == undefined)
                         return ;
                    
                    console.log(data[d.properties["name"]]["rateColor"]);                 
                    d3.select(this)
                        .attr("class", data[d.properties["name"]]["rateColor"]);
                });
            
            
            //add title info 
            paths.append("title")
            .text(function(d) {
                if(data[d.properties["name"]] == undefined)
                         return ;
                return d.properties["name"] + "人口密度"+ data[d.properties["name"]]["rateVal"] + 
                    "人每平方公里";
            });
        }
}

   
    

    
    